<template>
  <view>
    <view
      class="cu-modal drawer-modal justify-end"
      :class="modalNameDetail == 'DrawerModalR' ? 'show' : ''"
      @tap="hideModal"
    >
      <view class="cu-dialog basis-xl" @tap.stop="">
        <view class="container">
          <view class="cu-modal-slot bg-white">
					<view class="cu-modal-header">筛选</view>
					<view class="cu-modal-search">
						<!-- <view class="cu-modal-search-title">物料名称</view> -->
						<view class="margin-top-sm">
              <u-input v-model="query.mname" :type="type" :border="border" placeholder="物料名称" @input="input"/>
						</view>
					</view>
          </view>
          <scroll-view
            class="scroll-region"
            scroll-y
            @scrolltolower="loadMore"
            :scrolltolower-enabled="true"
          >
            <!-- 展示caiLiaoData的数据，以卡片的形式展示，每个卡片的左侧的第一项是一个复选框按钮 -->
            <view class="cu-list menu-avatar">
              <!-- class="cu-item" -->
              <view style="margin: 10px;padding: 10px;background: #fff;display: flex;justify-content: space-between;"  v-for="(item, index) in list"  :key="index">
                <!-- <view class="cu-avatar round lg" :style="[{backgroundImage:'url('+item.caiLiaoGuiGe+')'}]"></view> -->
                <!-- checked="true" -->

                <view>
                  <view class="text-black flex font-weight-bold">
                      <view>{{ item.mname }}</view>
                  </view>
                  <view class="text-black flex">
                    <view>{{ item.mstd }}</view>
                  </view>
                  <view class="text-black flex">
										<view class="flex-sub">数量：</view>
										<view>
											<view
												style="display: inline-block;width: 70px;border-bottom: 1px solid #eee;text-align: center;">
												{{ item.num || "0" }}
											</view>
											{{ item.unit || "" }}
										</view>
									</view>
                </view>
                <view style="width: 50px;display: flex;justify-content: center;align-items: center;">
									<checkbox :checked="item.checked" @click="checkSelect(item)" />
								</view>
                  <!-- <js-uploadfile
                    v-model="item.dataMap"
                    :biz-key="item.id"
                    biz-type="pmMaterialcheck_image_child"
                  ></js-uploadfile> -->

              </view>
            </view>
          </scroll-view>

        </view>
        <view class="cu-bar bg-white flex padding">
          <button class="cu-btn   lines-red lg  " @tap="hideModal">取消</button>
          <button class="cu-btn   bg-confirm lg margin-left" @tap="confirm">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>
<script>

export default {

  props: {
    modalNameDetail: {
      type: String,
      default: "DrawerModalR",
    },
  },
  data() {
    return {
      // modalName:'DrawerModalR',
      imgList: [],
      modalName: null,
      list: [],
      checkedList: [],
      checkbox: [
        {
          value: "A",
          checked: true,
        },
        {
          value: "B",
          checked: true,
        },
        {
          value: "C",
          checked: false,
        },
      ],
      uploadOptions: {},
      query: {
        pageNo: 1,
        pageSize: 20,
        // orderBy: "a.create_date desc",
      },
      loadStatus: "loadmore",
    };
  },
  created() {
    console.log(this.modalNameDetail, "modalNameDetail");
    this.loadData("add");
  },
  methods: {
    checkSelect(item){
        item.checked = !item.checked;
        console.log(item.checked,item);
    },
    loadMore() {
      this.loadStatus = "loading";
      setTimeout(() => {
        this.query.pageNo += 1;
        this.loadData("add");
      }, 100);
    },
    loadData(type) {
      // 循环10次重复赋值
      this.$u.api.zfgs.pmMaterialListData(this.query).then((res) => {
        if (res.list.length >= 0) {
          // this.xmList = res.list
          if (res.list.length < 20 || res.list.length == 0) {
            this.loadStatus = "nomore";
          }
          var data = res.list;
          //模拟收藏
          data.forEach((item, index) => {
            // 添加isStar 属性 随机2.5.8属性为true,其他为false
            item.checked = false;
          });

          if (type == "add") {
            for (var i = 0; i < data.length; i++) {
              this.list.push(data[i]);
            }
          } else {
            this.list = data;
          }
        }
      });
    },
    showModal() {
      // this.modalName = 'DrawerModalR'
      this.$emit("modalNameDetailEmit", "DrawerModalR");
    },
    hideModal() {
        this.list.map((item)=>{
            item.checked = false
        })
        this.$forceUpdate();
      // this.modalName = null
      this.$emit("modalNameDetailEmit", "");
    },
    ViewImage(e) {
      uni.previewImage({
        urls: this.imgList,
        current: e.currentTarget.dataset.url,
      });
    },
    DelImg(e) {
      uni.showModal({
        title: "",
        content: "确定要删除吗？",
        cancelText: "取消",
        confirmText: "确认",
        success: (res) => {
          if (res.confirm) {
            this.imgList.splice(e.currentTarget.dataset.index, 1);
          }
        },
      });
    },
    ChooseImage() {
      uni.chooseImage({
        count: 4, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: (res) => {
          if (this.imgList.length != 0) {
            this.imgList = this.imgList.concat(res.tempFilePaths);
            this.$u.toast("上传成功");
          } else {
            this.imgList = res.tempFilePaths;
          }
        },
      });
    },
    DateChange(e) {
      this.date = e.detail.value;
    },
    confirm() {
      this.$u.toast("确认成功");
      // this.modalName = null
        //遍历this.list,值为checked为true的元素，传递给父元素

        //遍历this.list,如果所有的值均为false，则提示请选择


        this.list.forEach((item) => {
          if (item.checked) {
            this.checkedList.push(item);
            item.checked = false;
          }
        });
        if (this.checkedList.length == 0) {
          this.$u.toast("请选择材料");
          return;
        }
        this.$emit("checkedListEmit", this.checkedList);
      this.$emit("modalNameDetailEmit", "");
    },
    textareaAInput(e) {},
    input(e){
      this.query.mname = e;
      this.loadData();
    },
  },
};
</script>
<style scoped lang="scss">
.cu-modal {
  z-index: 998;
  text-align: left;
}
.container {
  display: flex;
  flex-direction: column;
}
.scroll-region {
  width: 100%;
  height: 200px; /* 设置滚动区域的高度 */
  overflow-y: auto; /* 仅允许垂直滚动，也可用scroll-y代替 */
}
.cu-avatar {
  background: #fff;
}
.cu-item {
  height: 160rpx !important;
}
.cu-modal-slot {
  padding: 42rpx 32rpx 20rpx 32rpx;
  margin-bottom: 20rpx;
  position: relative;
}
.bg-confirm {
  background: #3e97b0;
  color: #ffffff;
}
.cu-btn{
	flex: 1;
}
.cu-modal {
  z-index: 9999;
  text-align: left;
}
.container {
  display: flex;
  flex-direction: column;
  height: 88%;
}
.scroll-region {
  width: 100%;
  height: 100%; /* 设置滚动区域的高度 */
  overflow-y: auto; /* 仅允许垂直滚动，也可用scroll-y代替 */
}
.cu-avatar {
  background: #fff;
}
.cu-item {
  // height: 240rpx !important;
}
</style>
